import { useState, useCallback, useEffect, } from "react";
import { useDispatch } from "react-redux";
import { useNavigate, useParams } from 'react-router-dom';
import CommonService from "../../app/services/commonService";
import UserService from "../../app/services/userService";
import UserBasicInfo from "../components/userBasicInfo";
import UserIntent from "../components/userIntent";
import ChevronLeftIcon from "@heroicons/react/24/outline/ChevronLeftIcon";
import ListBulletIcon from "@heroicons/react/24/outline/ListBulletIcon";
import { NotificationManager } from 'react-notifications';
import CompanyUserService from "../../app/services/companyUserService";


import _ from "lodash";

function StudentDetail() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const params = useParams();

  const [data, setData] = useState({});
  const [sheetData, setSheetData] = useState([]);
  const [regionIntentions, setRegionIntentions] = useState([]);

  const fetchData = useCallback(async () => {
    CommonService.setLoading(true);
    CompanyUserService.studentDetail(params.id).then((res) => {
      if (res.success) {
        setData(res.data);
        const regionIntentions = res.data.universityRegions.map(item => item.province);
        setRegionIntentions(regionIntentions)
      }
    }).finally(() => {
      CommonService.setLoading(false);
    });
  }, [params.id]);

  const fetchSheetData = useCallback(async () => {
    CommonService.setLoading(true);
    CompanyUserService.getUserSheetDetail(params.id,1).then((res) => {
      if (res.success) {
        setSheetData(res.data);
      }
    }).finally(() => {
      CommonService.setLoading(false);
    });
  }, [params.id]);

  useEffect(() => {
    fetchData();
    fetchSheetData();
  }, [params.id])

  const goEditorInfo = () => {
    CommonService.setLoading(true);
    UserService.cloneUserSheet({ id: params.id }).then((res) => {
      if (res.success) {
        navigate(`/app/SheetEditor/${params.id}`);
      } else {
        NotificationManager.success(res.msg, '提示');
      }
    }).finally(() => {
      CommonService.setLoading(false);
    });
  }

  return (
    <>
      <div className="w-full flex flex-col p-4 card  bg-base-100">
        <div className="flex flex-row items-center justify-between px-2 m-2">
          <a className="link link-primary inline-block" onClick={() => { window.history.go(-1) }}><div className="flex flex-row items-center justify-start"><ChevronLeftIcon className="w-4 h-4" /> <div>返回上一页</div></div></a>
          <button className="btn btn-primary" onClick={() => goEditorInfo() }>编辑志愿单</button>
        </div>

        <div className="flex flex-row items-center justify-center px-2 m-2 text-lg font-bold">
          {data.userName}
        </div>
        <div className="divider" />
        <UserBasicInfo basicInfo={data.basicInfo} />
        <div className="grid grid-cols-2 grid-rows-1 gap-1">
          <UserIntent title="区域意向" intents={regionIntentions} />
          <UserIntent title="院校类型" intents={data.universityAttrs} />
        </div>
        <div className="flex flex-row items-center justify-start m-2">
          <ListBulletIcon className="w-6 h-6" /><div className="text-sm">志愿单</div>
        </div>
        <table className="table table-zebra bg-base-100 rounded-sm  border-1">
          <thead>
            <tr className=" border-b-2 border-base-100">
              <th className=" text-center">序号</th>
              <th className=" text-center">院校名称</th>
              <th className=" text-center">历年分数</th>
              <th className=" text-center">专业1</th>
              <th className=" text-center">专业2</th>
              <th className=" text-center">专业3</th>
              <th className=" text-center">专业4</th>
              <th className=" text-center">专业5</th>
              <th className=" text-center">专业6</th>
            </tr>
          </thead>
          <tbody>
            {sheetData && sheetData.length > 0 ? (
              sheetData.map((item, index) => {
                return (
                  <tr key={index}>
                    <th className=" text-center">{item.index}</th>
                    <td className=" text-center">
                      <div className="flex flex-col items-center justify-center text-xs p-1">
                        <div>{item.universityName}</div>
                        {item.tags.length > 0 ? <div>{item.enrollCode} | {item.type} | {item.tags}</div> : <div>{item.enrollCode}  | {item.type}</div>}
                      </div>
                    </td>
                    <td className=" text-center">
                      <div className="flex flex-col items-center justify-center text-xs">
                        {
                          item.scoreInfos && item.scoreInfos.length > 0 && item.scoreInfos.map((scoreItem, scoreIndex) => {
                            return (<div key={scoreIndex} className="flex flex-row items-center justify-center text-xs p-1 border-b-2">
                              <div className="flex flex-col items-center justify-center">
                                <div>{scoreItem.year}年</div>
                                <div>{scoreItem.batch.replace('本科', '')}/{scoreItem.submitType}</div>
                                <div>{scoreItem.minScore}分/{scoreItem.minScoreRank}位</div>
                              </div>
                            </div>)
                          })}
                      </div>
                    </td>
                    <td className=" text-center">
                      {item.major1.majorName != '' && <div className="flex flex-col items-center justify-center">
                        <div>{item.major1.majorName}</div>
                        <div>{item.major1.batch}</div><div>{item.major1.subjectRequire}</div>
                        <div>{item.major1.score}分/{item.major1.rank}位</div>
                      </div>}
                    </td>
                    <td className=" text-center">{item.major2.majorName != '' && <div className="flex flex-col items-center justify-center">
                      <div>{item.major2.majorName}</div>
                      <div>{item.major2.batch}</div><div>{item.major2.subjectRequire}</div>
                      <div>{item.major2.score}分/{item.major2.rank}位</div>
                    </div>}
                    </td>
                    <td className=" text-center">{item.major3.majorName != '' && <div className="flex flex-col items-center justify-center">
                      <div>{item.major3.majorName}</div>
                      <div>{item.major3.batch}</div><div>{item.major3.subjectRequire}</div>
                      <div>{item.major3.score}分/{item.major3.rank}位</div>
                    </div>}
                    </td>
                    <td className=" text-center">{item.major4.majorName != '' && <div className="flex flex-col items-center justify-center">
                      <div>{item.major4.majorName}</div>
                      <div>{item.major4.batch}</div><div>{item.major4.subjectRequire}</div>
                      <div>{item.major4.score}分/{item.major4.rank}位</div>
                    </div>}
                    </td>
                    <td className=" text-center">{item.major5.majorName != '' && <div className="flex flex-col items-center justify-center">
                      <div>{item.major5.majorName}</div>
                      <div>{item.major5.batch}</div><div>{item.major5.subjectRequire}</div>
                      <div>{item.major5.score}分/{item.major5.rank}位</div>
                    </div>}
                    </td>
                    <td className=" text-center">{item.major6.majorName != '' && <div className="flex flex-col items-center justify-center">
                      <div>{item.major6.majorName}</div>
                      <div>{item.major6.batch}</div><div>{item.major6.subjectRequire}</div>
                      <div>{item.major6.score}分/{item.major6.rank}位</div>
                    </div>}
                    </td>

                  </tr>
                );
              })
            ) : (
              <tr>
                <td colSpan="7">暂无数据</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </>
  );
}

export default StudentDetail;
